﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>Tags表单选择器 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">

<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#form-tags" class="nav-link font-weight-bold"><span>Tags表单选择器(Form tags)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#basic-usage" class="nav-link"><span>基本用法</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#tag-creation-using-separators" class="nav-link"><span>使用分隔符创建标签</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#last-tag-removal-via-backspace-keypress" class="nav-link"><span>通过 backspace 按键删除最后一个标签</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#styling-options" class="nav-link"><span>样式选项</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#using-with-native-browser-form-submission" class="nav-link"><span>与本机浏览器 &lt;form&gt; 提交一起使用</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#tag-validation" class="nav-link"><span>标签验证</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#detecting-new-invalid-and-duplicate-tags" class="nav-link"><span>检测新的，无效的和重复的标签</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#custom-rendering-with-default-scoped-slot" class="nav-link"><span>使用默认范围的插槽自定义呈现</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#scope-properties" class="nav-link"><span>范围属性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-native-browser-inputs" class="nav-link"><span>使用本地浏览器输入</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-custom-form-components" class="nav-link"><span>使用自定义表单组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#advanced-custom-rendering-usage" class="nav-link"><span>高级自定义渲染用法</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#creating-wrapper-components" class="nav-link"><span>创建包装器组件</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#b-form-tag-helper-component" class="nav-link"><span>&lt;b-form-tag&gt;  辅助组件</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-tags" class="nav-link"><span>&lt;b-form-tags&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-tag" class="nav-link"><span>&lt;b-form-tag&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">Tags表单选择器</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">Tags表单选择器(Form tags)</h1>
  <p class="bd-lead">轻量级的定制标记输入表单控件，具有用于定制界面渲染，重复标记检测和可选标记验证的选项。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>


<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#basic-usage" class=""><span data-v-811345e6="">Basic usage</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#tag-creation-using-separators" class=""><span data-v-811345e6="">Tag creation using separators</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#last-tag-removal-via-backspace-keypress" class=""><span data-v-811345e6="">Last tag removal via backspace keypress</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#styling-options" class=""><span data-v-811345e6="">Styling Options</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-with-native-browser-form-submission" class=""><span data-v-811345e6="">Using with native browser &lt;form&gt; submission</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#tag-validation" class=""><span data-v-811345e6="">Tag validation</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#detecting-new-invalid-and-duplicate-tags" class=""><span data-v-811345e6="">Detecting new, invalid, and duplicate tags</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#custom-rendering-with-default-scoped-slot" class=""><span data-v-811345e6="">Custom rendering with default scoped slot</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#scope-properties" class=""><span data-v-811345e6="">Scope properties</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-native-browser-inputs" class=""><span data-v-811345e6="">Using native browser inputs</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-custom-form-components" class=""><span data-v-811345e6="">Using custom form components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#advanced-custom-rendering-usage" class=""><span data-v-811345e6="">Advanced custom rendering usage</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#creating-wrapper-components" class=""><span data-v-811345e6="">Creating wrapper components</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-form-tag-helper-component" class=""><span data-v-811345e6="">&lt;b-form-tag&gt; helper component</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">组件引用</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-tags" class=""><span data-v-811345e6="">&lt;b-form-tags&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-tag" class=""><span data-v-811345e6="">&lt;b-form-tag&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">导入单个组件</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</nav>
<p>标签是短字符串数组，以各种方式使用，例如分配类别。使用默认的用户界面，或通过使用默认的作用域插槽创建自己的自定义界面。</p>
<p>T带标记的输入已添加到 BootstrapVue 版本 <code translate="no" class="notranslate text-nowrap">v2.2.0</code> 中。</p>
<h2 id="basic-usage" class="bv-no-focus-ring"><span class="bd-content-title">基本用法<a class="anchorjs-link" href="#basic-usage" aria-labelledby="basic-usage"></a></span></h2>
<p>标签将删除任何开头和结尾的空格，并且不允许重复标签。默认情况下，包含空格的标签是允许的。</p>
<p>通过单击 <strong>Add</strong> 按钮，按 <kbd class="notranslate" translate="no">ENTER</kbd> 键或在 <code translate="no" class="notranslate text-nowrap">change</code> 事件触发新标签输入时（例如，当焦点从输入移开时）添加标签。仅当用户输入新标签值时，<strong>Add</strong> 按钮才会出现。</p>
<p><strong>默认渲染：</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-form-tags-example notranslate">
<div>
<label for="tags-basic">Type a new tag and press enter</label>
<div role="group" tabindex="-1" class="b-form-tags form-control h-auto mb-2" id="__BVID__915" aria-describedby="__BVID__915__selected_">
<output role="status" for="tags-basic" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__915__selected-tags_">apple, orange</output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__915__removed-tags_"></div>
<ul class="list-unstyled mt-n1 mb-0 d-flex flex-wrap align-items-center" id="__BVID__915___TAG__LIST__">
<li title="apple" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mt-1 mr-1 badge-secondary" id="__BVID__916" aria-labelledby="__BVID__916__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__916__taglabel_">apple</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__916" aria-describedby="__BVID__916__taglabel_">×</button>
</li>
<li title="orange" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mt-1 mr-1 badge-secondary" id="__BVID__917" aria-labelledby="__BVID__917__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__917__taglabel_">orange</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__917" aria-describedby="__BVID__917__taglabel_">×</button>
</li>
<li role="none" aria-live="off" class="flex-grow-1 mt-1" aria-controls="__BVID__915___TAG__LIST__">
<div role="group" class="d-flex">
<input id="tags-basic" value="" type="text" placeholder="Add tag..." class="b-form-tags-input w-100 flex-grow-1 p-0 m-0 bg-transparent border-0" style="outline: 0px; min-width: 5rem;">
<button type="button" disabled="disabled" class="btn b-form-tags-button py-0 btn-outline-secondary disabled invisible" style="font-size: 90%;">Add</button>
</div>
</li>
</ul>
<div aria-live="polite" aria-atomic="true"></div>
</div>
<p>Value: [
  "apple",
  "orange"
]</p>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tags-basic"</span>&gt;</span>Type a new tag and press enter<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span> <span class="hljs-attr">input-id</span>=<span class="hljs-string">"tags-basic"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: {{ value }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: [<span class="hljs-string">'apple'</span>, <span class="hljs-string">'orange'</span>]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<p>您可以通过 <code translate="no" class="notranslate text-nowrap">no-add-on-enter</code> 属性在按 <kbd class="notranslate" translate="no">ENTER</kbd> 时禁用添加新标签，并可以通过 <code translate="no" class="notranslate text-nowrap">add-on-change</code> 属性在输入的 <code translate="no" class="notranslate text-nowrap">change</code> 事件上添加标签。</p>
<h2 id="tag-creation-using-separators" class="bv-no-focus-ring"><span class="bd-content-title">使用分隔符创建标签<a class="anchorjs-link" href="#tag-creation-using-separators" aria-labelledby="tag-creation-using-separators"></a></span></h2>
<p>要在键入分隔符时自动创建标签（例如 <kbd class="notranslate" translate="no">SPACE</kbd> ，<kbd class="notranslate" translate="no">,</kbd> 等），请将 <code translate="no" class="notranslate text-nowrap">separator</code> 属性设置为将触发添加标签的字符。如果需要多个分隔符，则将它们作为单个字符串（即<code translate="no" class="notranslate text-nowrap">' ,;'</code>）或字符数组（即 <code translate="no" class="notranslate text-nowrap">[' ', ',', ';']</code> ）包含在内，这将触发一个新标签在 <kbd class="notranslate" translate="no">SPACE</kbd> ，<kbd class="notranslate" translate="no">,</kbd> ，<em>或</em> <kbd class="notranslate" translate="no">;</kbd> 时添加 键入）。分隔符必须是单个字符。</p>
<p>以下示例将在 <kbd class="notranslate" translate="no">SPACE</kbd> ，<kbd class="notranslate" translate="no">,</kbd> ，或 <kbd class="notranslate" translate="no">;</kbd> 时自动创建标签。键入：</p>
<div translate="translate" class="bd-example vue-example vue-example-form-tags-separator notranslate">
<div>
<label for="tags-separators">Enter tags separated by space, comma or semicolon</label>
<div role="group" tabindex="-1" class="b-form-tags form-control h-auto mb-2" id="__BVID__919" aria-describedby="__BVID__919__selected_">
<output role="status" for="tags-separators" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__919__selected-tags_">one, two</output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__919__removed-tags_"></div>
<ul class="list-unstyled mt-n1 mb-0 d-flex flex-wrap align-items-center" id="__BVID__919___TAG__LIST__">
<li title="one" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mt-1 mr-1 badge-secondary" id="__BVID__920" aria-labelledby="__BVID__920__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__920__taglabel_">one</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__920" aria-describedby="__BVID__920__taglabel_">×</button>
</li>
<li title="two" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mt-1 mr-1 badge-secondary" id="__BVID__921" aria-labelledby="__BVID__921__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__921__taglabel_">two</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__921" aria-describedby="__BVID__921__taglabel_">×</button>
</li>
<li role="none" aria-live="off" class="flex-grow-1 mt-1" aria-controls="__BVID__919___TAG__LIST__">
<div role="group" class="d-flex">
<input id="tags-separators" value="" type="text" placeholder="Enter new tags separated by space, comma or semicolon" class="b-form-tags-input w-100 flex-grow-1 p-0 m-0 bg-transparent border-0" style="outline: 0px; min-width: 5rem;">
<button type="button" disabled="disabled" class="btn b-form-tags-button py-0 btn-outline-secondary disabled invisible" style="font-size: 90%;">Add</button>
</div>
</li>
</ul>
<div aria-live="polite" aria-atomic="true"></div>
</div>
<p>Value: [
  "one",
  "two"
]</p>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tags-separators"</span>&gt;</span>Enter tags separated by space, comma or semicolon<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span>
      <span class="hljs-attr">input-id</span>=<span class="hljs-string">"tags-separators"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
      <span class="hljs-attr">separator</span>=<span class="hljs-string">" ,;"</span>
      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter new tags separated by space, comma or semicolon"</span>
      <span class="hljs-attr">no-add-on-enter</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: {{ value }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: [<span class="hljs-string">'one'</span>, <span class="hljs-string">'two'</span>]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h2 id="last-tag-removal-via-backspace-keypress" class="bv-no-focus-ring"><span class="bd-content-title">通过 backspace 按键删除最后一个标签<a class="anchorjs-link" href="#last-tag-removal-via-backspace-keypress" aria-labelledby="last-tag-removal-via-backspace-keypress"></a></span></h2>
<p>当设置了 <code translate="no" class="notranslate text-nowrap">remove-on-delete</code> 属性后，当用户按下<kbd class="notranslate" translate="no">BACKSPACE</kbd>（ 或 <kbd class="notranslate" translate="no">DEL</kbd> ）<em>并且</em> 输入值为空时，标签列表中的最后一个标签将被删除。</p>
<div translate="translate" class="bd-example vue-example vue-example-form-tags-remove-on-delete notranslate">
<div>
<label for="tags-remove-on-delete">Enter new tags separated by space</label>
<div role="group" tabindex="-1" class="b-form-tags form-control h-auto mb-2" id="__BVID__923" aria-describedby="__BVID__923__selected_">
<output role="status" for="tags-remove-on-delete" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__923__selected-tags_">apple, orange, grape</output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__923__removed-tags_"></div>
<ul class="list-unstyled mt-n1 mb-0 d-flex flex-wrap align-items-center" id="__BVID__923___TAG__LIST__">
<li title="apple" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mt-1 mr-1 badge-secondary" id="__BVID__924" aria-labelledby="__BVID__924__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__924__taglabel_">apple</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__924" aria-describedby="__BVID__924__taglabel_">×</button>
</li>
<li title="orange" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mt-1 mr-1 badge-secondary" id="__BVID__925" aria-labelledby="__BVID__925__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__925__taglabel_">orange</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__925" aria-describedby="__BVID__925__taglabel_">×</button>
</li>
<li title="grape" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mt-1 mr-1 badge-secondary" id="__BVID__926" aria-labelledby="__BVID__926__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__926__taglabel_">grape</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__926" aria-describedby="__BVID__926__taglabel_">×</button>
</li>
<li role="none" aria-live="off" class="flex-grow-1 mt-1" aria-controls="__BVID__923___TAG__LIST__">
<div role="group" class="d-flex">
<input aria-describedby="tags-remove-on-delete-help" id="tags-remove-on-delete" value="" type="text" placeholder="Enter new tags separated by space" class="b-form-tags-input w-100 flex-grow-1 p-0 m-0 bg-transparent border-0" style="outline: 0px; min-width: 5rem;">
<button type="button" disabled="disabled" class="btn b-form-tags-button py-0 btn-outline-secondary disabled invisible" style="font-size: 90%;">Add</button>
</div>
</li>
</ul>
<div aria-live="polite" aria-atomic="true"></div>
</div>
<small id="tags-remove-on-delete-help" class="form-text text-muted"> Press <kbd>BACKSPACE</kbd> to remove the last tag entered </small>
<p>Value: [
  "apple",
  "orange",
  "grape"
]</p>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tags-remove-on-delete"</span>&gt;</span>Enter new tags separated by space<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span>
      <span class="hljs-attr">input-id</span>=<span class="hljs-string">"tags-remove-on-delete"</span>
      <span class="hljs-attr">:input-attrs</span>=<span class="hljs-string">"{ 'aria-describedby': 'tags-remove-on-delete-help' }"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
      <span class="hljs-attr">separator</span>=<span class="hljs-string">" "</span>
      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter new tags separated by space"</span>
      <span class="hljs-attr">remove-on-delete</span>
      <span class="hljs-attr">no-add-on-enter</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-text</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tags-remove-on-delete-help"</span>&gt;</span>
      Press <span class="hljs-tag">&lt;<span class="hljs-name">kbd</span>&gt;</span>BACKSPACE<span class="hljs-tag">&lt;/<span class="hljs-name">kbd</span>&gt;</span> to remove the last tag entered
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-text</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: {{ value }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: [<span class="hljs-string">'apple'</span>, <span class="hljs-string">'orange'</span>, <span class="hljs-string">'grape'</span>]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h2 id="styling-options" class="bv-no-focus-ring"><span class="bd-content-title">样式选项<a class="anchorjs-link" href="#styling-options" aria-labelledby="styling-options"></a></span></h2>
<p>有几个属性可以用来更改默认标记接口的基本样式：</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tag-pills</code></td>
<td>呈现带有胶囊外观的标签</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tag-variant</code></td>
<td>将 Bootstrap 上下文相关主题颜色之一应用于标签</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">size</code></td>
<td>设置组件外观的大小。'sm'，'md'（默认）或'lg'</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">placeholder</code></td>
<td>新标签输入元素的占位符文本</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">state</code></td>
<td>设置控件的上下文状态。 设置为 <code translate="no" class="notranslate text-nowrap">true</code>（有效），<code translate="no" class="notranslate text-nowrap">false</code>（无效）或 <code translate="no" class="notranslate text-nowrap">null</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">disabled</code></td>
<td>将组件置于禁用状态</td>
</tr>
</tbody>
</table>
</div>
<p>有关其他属性，请参阅此页面底部的组件参考部分。</p>
<p>组件的焦点和验证状态样式取决于 BootstrapVue 的自定义 CSS 。</p>
<div translate="translate" class="bd-example vue-example vue-example-form-tags-style-options notranslate">
<div>
<label for="tags-pills">Enter tags</label>
<div role="group" tabindex="-1" class="b-form-tags form-control h-auto mb-2 form-control-lg" id="__BVID__928" aria-describedby="__BVID__928__selected_">
<output role="status" for="tags-pills" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__928__selected-tags_">apple, orange, grape</output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__928__removed-tags_"></div>
<ul class="list-unstyled mt-n1 mb-0 d-flex flex-wrap align-items-center" id="__BVID__928___TAG__LIST__">
<li title="apple" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mt-1 mr-1 badge-primary badge-pill" id="__BVID__929" aria-labelledby="__BVID__929__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__929__taglabel_">apple</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__929" aria-describedby="__BVID__929__taglabel_">×</button>
</li>
<li title="orange" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mt-1 mr-1 badge-primary badge-pill" id="__BVID__930" aria-labelledby="__BVID__930__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__930__taglabel_">orange</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__930" aria-describedby="__BVID__930__taglabel_">×</button>
</li>
<li title="grape" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mt-1 mr-1 badge-primary badge-pill" id="__BVID__931" aria-labelledby="__BVID__931__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__931__taglabel_">grape</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__931" aria-describedby="__BVID__931__taglabel_">×</button>
</li>
<li role="none" aria-live="off" class="flex-grow-1 mt-1" aria-controls="__BVID__928___TAG__LIST__">
<div role="group" class="d-flex">
<input id="tags-pills" value="" type="text" placeholder="Enter new tags separated by space" class="b-form-tags-input w-100 flex-grow-1 p-0 m-0 bg-transparent border-0" style="outline: 0px; min-width: 5rem;">
<button type="button" disabled="disabled" class="btn b-form-tags-button py-0 btn-outline-secondary disabled invisible" style="font-size: 90%;">Add</button>
</div>
</li>
</ul>
<div aria-live="polite" aria-atomic="true"></div>
</div>
<p>Value: [
  "apple",
  "orange",
  "grape"
]</p>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tags-pills"</span>&gt;</span>Enter tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span>
      <span class="hljs-attr">input-id</span>=<span class="hljs-string">"tags-pills"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
      <span class="hljs-attr">tag-variant</span>=<span class="hljs-string">"primary"</span>
      <span class="hljs-attr">tag-pills</span>
      <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>
      <span class="hljs-attr">separator</span>=<span class="hljs-string">" "</span>
      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter new tags separated by space"</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: {{ value }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: [<span class="hljs-string">'apple'</span>, <span class="hljs-string">'orange'</span>, <span class="hljs-string">'grape'</span>]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h2 id="using-with-native-browser-form-submission" class="bv-no-focus-ring"><span class="bd-content-title">与本机浏览器 <code translate="no" class="notranslate text-nowrap">&lt;form&gt;</code> 提交一起使用<a class="anchorjs-link" href="#using-with-native-browser-form-submission" aria-labelledby="using-with-native-browser-form-submission"></a></span></h2>
<p>除非您通过 <code translate="no" class="notranslate text-nowrap">name</code> 属性提供名称，否则不会通过标准表单 <code translate="no" class="notranslate text-nowrap">action</code>【操作】提交带标记的输入的值。提供名称后，<code translate="no" class="notranslate text-nowrap">&lt;b-form-tags&gt;</code> 将为每个标签创建一个隐藏的 <code translate="no" class="notranslate text-nowrap">&lt;input&gt;</code> 。隐藏的输入会将 <code translate="no" class="notranslate text-nowrap">name</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">name</code> 属性的值。</p>
<p>使用 <a href="#custom-rendering-with-default-scoped-slot" class="font-weight-bold">custom rendering</a>【自定义渲染】（设置 <code translate="no" class="notranslate text-nowrap">name</code> 属性时）也会生成隐藏的输入。</p>
<h2 id="tag-validation" class="bv-no-focus-ring"><span class="bd-content-title">标签验证<a class="anchorjs-link" href="#tag-validation" aria-labelledby="tag-validation"></a></span></h2>
<p>默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-form-tags&gt;</code> 检测用户何时尝试输入（区分大小写）重复标签，并将向用户提供集成反馈。</p>
<p>您可以选择通过 <code translate="no" class="notranslate text-nowrap">tag-validator</code> 属性提供标签验证器方法。验证器函数将接收一个参数，即正在添加的标签，并且如果标签通过验证且可以添加，则返回 <code translate="no" class="notranslate text-nowrap">true</code> ；如果标签未通过验证，则返回 <code translate="no" class="notranslate text-nowrap">false</code>（在这种情况下，不将其添加到标签数组中）。将向用户提供综合反馈，列出无法添加的无效标签。</p>
<p>标签验证仅对通过用户输入添加的标签进行。 通过 <code translate="no" class="notranslate text-nowrap">v-model</code> 对标签所做的更改未通过验证。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-tags-validation-feedback notranslate">
<div>
<div role="group" class="form-group" id="__BVID__933">
<label for="tags-validation" class="d-block" id="__BVID__933__BV_label_">Tags validation example</label>
<div class="bv-no-focus-ring">
<div role="group" tabindex="-1" class="b-form-tags form-control h-auto" id="__BVID__934" aria-describedby="__BVID__934__selected_">
<output role="status" for="tags-validation" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__934__selected-tags_"></output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__934__removed-tags_"></div>
<ul class="list-unstyled mt-n1 mb-0 d-flex flex-wrap align-items-center" id="__BVID__934___TAG__LIST__">
<li role="none" aria-live="off" class="flex-grow-1 mt-1" aria-controls="__BVID__934___TAG__LIST__">
<div role="group" class="d-flex">
<input aria-describedby="tags-validation-help" id="tags-validation" value="" type="text" placeholder="Add tag..." class="b-form-tags-input w-100 flex-grow-1 p-0 m-0 bg-transparent border-0" style="outline: 0px; min-width: 5rem;">
<button type="button" disabled="disabled" class="btn b-form-tags-button py-0 btn-outline-secondary disabled invisible" style="font-size: 90%;">Add</button>
</div>
</li>
</ul>
<div aria-live="polite" aria-atomic="true"></div>
</div>
<div tabindex="-1" role="alert" aria-live="assertive" aria-atomic="true" class="invalid-feedback"> You must provide at least 3 tags and no more than 8 </div>
<small tabindex="-1" class="form-text text-muted">
<div id="tags-validation-help"> Tags must be 3 to 5 characters in length and all lower
         case. Enter tags separated by spaces or press enter. </div>
</small></div>
</div>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">:state</span>=<span class="hljs-string">"state"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Tags validation example"</span> <span class="hljs-attr">label-for</span>=<span class="hljs-string">"tags-validation"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span>
        <span class="hljs-attr">input-id</span>=<span class="hljs-string">"tags-validation"</span>
        <span class="hljs-attr">:input-attrs</span>=<span class="hljs-string">"{ 'aria-describedby': 'tags-validation-help' }"</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"tags"</span>
        <span class="hljs-attr">:state</span>=<span class="hljs-string">"state"</span>
        <span class="hljs-attr">:tag-validator</span>=<span class="hljs-string">"tagValidator"</span>
        <span class="hljs-attr">separator</span>=<span class="hljs-string">" "</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
      <span class="hljs-comment">&lt;!-- The following slots are for b-form-group --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:invalid-feedback</span>&gt;</span>
        You must provide at least 3 tags and no more than 8
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:description</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tags-validation-help"</span>&gt;</span>
         Tags must be 3 to 5 characters in length and all lower
         case. Enter tags separated by spaces or press enter.
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">tags</span>: [],
        <span class="hljs-attr">dirty</span>: <span class="hljs-literal">false</span>
      }
    },
    <span class="hljs-attr">computed</span>: {
      state() {
        <span class="hljs-comment">// Overall component validation state</span>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.dirty ? (<span class="hljs-keyword">this</span>.tags.length &gt; <span class="hljs-number">2</span> &amp;&amp; <span class="hljs-keyword">this</span>.tags.length &lt; <span class="hljs-number">9</span>) : <span class="hljs-literal">null</span>
      }
    },
    <span class="hljs-attr">watch</span>: {
      tags(newVal, oldVal) {
        <span class="hljs-comment">// Set the dirty flag on first change to the tags array</span>
        <span class="hljs-keyword">this</span>.dirty = <span class="hljs-literal">true</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      tagValidator(tag) {
        <span class="hljs-comment">// Individual tag validator function</span>
        <span class="hljs-keyword">return</span> tag === tag.toLowerCase() &amp;&amp; tag.length &gt; <span class="hljs-number">2</span> &amp;&amp; tag.length &lt; <span class="hljs-number">6</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h3 id="detecting-new-invalid-and-duplicate-tags" class="bv-no-focus-ring"><span class="bd-content-title">检测新的，无效的和重复的标签<a class="anchorjs-link" href="#detecting-new-invalid-and-duplicate-tags" aria-labelledby="detecting-new-invalid-and-duplicate-tags"></a></span></h3>
<p>每当将新标签输入到新标签输入元素中，未通过验证的标签或检测到重复的标签时，就会发出 <code translate="no" class="notranslate text-nowrap">tag-state</code>【标签状态】事件。事件处理程序将接收三个数组作为其参数：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">validTags</code>（通过验证的标签）</li>
<li><code translate="no" class="notranslate text-nowrap">invalidTags</code>（未通过验证的标签）</li>
<li><code translate="no" class="notranslate text-nowrap">duplicateTags</code>（与现有标签或有效标签重复的标签）。</li>
</ul>
<p>仅当新标签输入更改（输入的字符被视为标签的一部分）或用户尝试添加标签（即通过 <kbd class="notranslate" translate="no">ENTER</kbd> ，单击 <strong>Add</strong> 按钮或输入分隔符）时，才会发出事件。当用户清除新标签输入元素（或仅包含空格）时，这三个数组将为空。</p>
<p>如果要在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-tags&gt;</code> 组件之外为重复和无效标签提供自己的反馈（通过使用 <code translate="no" class="notranslate text-nowrap">tag-state</code> 事件），则可以通过设置道具重复来禁用内置重复和无效消息 <code translate="no" class="notranslate text-nowrap">duplicate-tag-text</code> 和 <code translate="no" class="notranslate text-nowrap">invalid-tag-text</code>（分别）为空字符串（<code translate="no" class="notranslate text-nowrap">''</code>）或 <code translate="no" class="notranslate text-nowrap">null</code> 。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-tags-tags-state-event notranslate">
<div>
<label for="tags-state-event">Enter tags</label>
<div role="group" tabindex="-1" class="b-form-tags form-control h-auto" id="__BVID__936" aria-describedby="__BVID__936__selected_">
<output role="status" for="tags-state-event" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__936__selected-tags_"></output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__936__removed-tags_"></div>
<ul class="list-unstyled mt-n1 mb-0 d-flex flex-wrap align-items-center" id="__BVID__936___TAG__LIST__">
<li role="none" aria-live="off" class="flex-grow-1 mt-1" aria-controls="__BVID__936___TAG__LIST__">
<div role="group" class="d-flex">
<input id="tags-state-event" value="" type="text" placeholder="Enter tags (3-5 characters) separated by space" class="b-form-tags-input w-100 flex-grow-1 p-0 m-0 bg-transparent border-0" style="outline: 0px; min-width: 5rem;">
<button type="button" disabled="disabled" class="btn b-form-tags-button py-0 btn-outline-secondary disabled invisible" style="font-size: 90%;">Add</button>
</div>
</li>
</ul>
<div aria-live="polite" aria-atomic="true"></div>
</div>
<p class="mt-2">Tags: []</p>
<p>Event values:</p>
<ul>
<li>validTags: []</li>
<li>invalidTags: []</li>
<li>duplicateTags: []</li>
</ul>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tags-state-event"</span>&gt;</span>Enter tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span>
      <span class="hljs-attr">input-id</span>=<span class="hljs-string">"tags-state-event"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"tags"</span>
      <span class="hljs-attr">:tag-validator</span>=<span class="hljs-string">"validator"</span>
      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter tags (3-5 characters) separated by space"</span>
      <span class="hljs-attr">separator</span>=<span class="hljs-string">" "</span>
      @<span class="hljs-attr">tag-state</span>=<span class="hljs-string">"onTagState"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span>Tags: {{ tags }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Event values:<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>validTags: {{ validTags }}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>invalidTags: {{ invalidTags }}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>duplicateTags: {{ duplicateTags }}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">tags</span>: [],
        <span class="hljs-attr">validTags</span>: [],
        <span class="hljs-attr">invalidTags</span>: [],
        <span class="hljs-attr">duplicateTags</span>: []
      }
    },
    <span class="hljs-attr">methods</span>: {
      onTagState(valid, invalid, duplicate) {
        <span class="hljs-keyword">this</span>.validTags = valid
        <span class="hljs-keyword">this</span>.invalidTags = invalid
        <span class="hljs-keyword">this</span>.duplicateTags = duplicate
      },
      validator(tag) {
        <span class="hljs-keyword">return</span> tag.length &gt; <span class="hljs-number">2</span> &amp;&amp; tag.length &lt; <span class="hljs-number">6</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h2 id="custom-rendering-with-default-scoped-slot" class="bv-no-focus-ring"><span class="bd-content-title">使用默认范围的插槽自定义呈现<a class="anchorjs-link" href="#custom-rendering-with-default-scoped-slot" aria-labelledby="custom-rendering-with-default-scoped-slot"></a></span></h2>
<p>如果您希望标签控件具有不同的外观，则可以通过默认的作用域插槽提供自己的自定义呈现。您可以创建自己的标签，也可以使用我们的帮助器 <code translate="no" class="notranslate text-nowrap">&lt;b-form-tag&gt;</code> 组件。</p>
<h3 id="scope-properties" class="bv-no-focus-ring"><span class="bd-content-title">范围属性<a class="anchorjs-link" href="#scope-properties" aria-labelledby="scope-properties"></a></span></h3>
<p>默认作用域的插槽提供了许多属性和方法，可用于呈现自定义界面。并非所有属性或方法都需要生成界面。</p>
<p>默认的插槽范围属性如下：</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tags</code></td>
<td>Array</td>
<td>当前标签字符串的数组</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">inputAttrs</code></td>
<td>Object</td>
<td>通过 <code translate="no" class="notranslate text-nowrap">v-bind="inputAttrs"</code> 应用于新标签输入元素的属性对象。详情请见下文</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">inputType</code></td>
<td>String</td>
<td><span class="badge badge-secondary">v2.3.0+</span> 要渲染的输入类型（<code translate="no" class="notranslate text-nowrap">input-type</code> 属性的规范化版本）</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">inputHandlers</code></td>
<td>Object</td>
<td>事件处理程序的对象，可通过 <code translate="no" class="notranslate text-nowrap">v-on="inputHandlers"</code> 应用于新标签输入元素。详情请见下文</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">removeTag</code></td>
<td>Function</td>
<td>删除标签的方法。接受一个参数，该参数是要删除的标签值</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">addTag</code></td>
<td>Function</td>
<td>添加新标签的方法。假定标签是输入的值，但可以选择接受一个参数，该参数是要添加的标签值</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">inputId</code></td>
<td>String</td>
<td>要添加到新标签输入元素的ID。默认为 <code translate="no" class="notranslate text-nowrap">input-id</code> 属性。如果未提供，则会自动生成一个唯一的ID。也可以通过“inputAttrs.id”获得.</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">isInvalid</code></td>
<td>Boolean</td>
<td>如果用户输入包含无效标签，则为 <code translate="no" class="notranslate text-nowrap">true</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">invalidTags</code></td>
<td>Array</td>
<td>用户输入的无效标签的数组</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">isDuplicate</code></td>
<td>Boolean</td>
<td>如果用户输入包含重复的标签，则为 <code translate="no" class="notranslate text-nowrap">true</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">duplicateTags</code></td>
<td>Array</td>
<td>用户输入的重复标签的数组</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">disableAddButton</code></td>
<td>Boolean</td>
<td>如果无法添加输入中的标签（所有无效和/或重复的标签），则为 <code translate="no" class="notranslate text-nowrap">true</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">disabled</code></td>
<td>Boolean</td>
<td>如果组件处于禁用状态，则为 <code translate="no" class="notranslate text-nowrap">true</code> 。<code translate="no" class="notranslate text-nowrap">disabled</code> 属性的值</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">state</code></td>
<td>Boolean</td>
<td>组件的上下文状态。<code translate="no" class="notranslate text-nowrap">state</code> 属性的值。可能的值为 <code translate="no" class="notranslate text-nowrap">true</code> ，<code translate="no" class="notranslate text-nowrap">false</code> 或 <code translate="no" class="notranslate text-nowrap">null</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">size</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">size</code> 属性的值</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">separator</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">separator</code> 属性的值</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">placeholder</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">placeholder</code> 属性的值</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tagRemoveLabel</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">tag-remove-label</code> 属性的值。用作标签的“删除”按钮上的 <code translate="no" class="notranslate text-nowrap">aria-label</code> 属性</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tagVariant</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">tag-variant</code> 属性的值</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tagClass</code></td>
<td>String, Array, or Object</td>
<td><code translate="no" class="notranslate text-nowrap">tag-variant</code> 属性的值。应用于标签元素的一个或多个类</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">addButtonText</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">add-button-text</code> 属性的值</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">addButtonVariant</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">add-button-variant</code> 属性的值</td>
</tr>
</tbody>
</table>
</div>
<h4 id="inputattrs-object-properties" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">inputAttrs</code> 对象属性<a class="anchorjs-link" href="#inputattrs-object-properties" aria-labelledby="inputattrs-object-properties"></a></span></h4>
<p>The <code translate="no" class="notranslate text-nowrap">inputAttrs</code> 对象包含用于绑定（<code translate="no" class="notranslate text-nowrap">v-bind</code>）到新标签输入元素的属性。</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">id</code></td>
<td>String</td>
<td>新标签输入的 <code translate="no" class="notranslate text-nowrap">id</code> 属性</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">value</code></td>
<td>String</td>
<td>新标签输入的 <code translate="no" class="notranslate text-nowrap">value</code> 属性</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">disabled</code></td>
<td>Boolean</td>
<td>新标签输入的 <code translate="no" class="notranslate text-nowrap">disabled</code> 属性。<code translate="no" class="notranslate text-nowrap">disabled</code> 属性的值</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">form</code></td>
<td>String</td>
<td>新标签输入的 <code translate="no" class="notranslate text-nowrap">form</code> 属性。<code translate="no" class="notranslate text-nowrap">form</code> 属性的值</td>
</tr>
</tbody>
</table>
</div>
<p><code translate="no" class="notranslate text-nowrap">inputAttrs</code> 对象还将包括通过 <code translate="no" class="notranslate text-nowrap">input-attrs</code> 属性设置的任何属性。请注意，以上属性优先于 <code translate="no" class="notranslate text-nowrap">input-attrs</code> 属性中指定的任何相同属性。</p>

<h4 id="inputhandlers-object-properties" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">inputHandlers</code> 对象属性<a class="anchorjs-link" href="#inputhandlers-object-properties" aria-labelledby="inputhandlers-object-properties"></a></span></h4>
<p><code translate="no" class="notranslate text-nowrap">inputHandlers</code> 对象包含事件处理程序，以绑定（<code translate="no" class="notranslate text-nowrap">v-on</code>）到新标签输入元素。</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">input</code></td>
<td>Function</td>
<td>输入元素 <code translate="no" class="notranslate text-nowrap">input</code> 事件的事件处理程序。接受事件对象或字符串的单个参数。更新新标签输入元素的内部v-model</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">change</code></td>
<td>Function</td>
<td>输入元素 <code translate="no" class="notranslate text-nowrap">change</code> 事件的事件处理程序。接受事件对象或字符串的单个参数。更改将触发添加标签。</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">keydown</code></td>
<td>Function</td>
<td>输入元素按下 <kbd class="notranslate" translate="no">ENTER</kbd> 和 <kbd class="notranslate" translate="no">DEL</kbd> 事件的事件处理程序。接受一个参数，它是本地 <code translate="no" class="notranslate text-nowrap">keydown</code> 事件对象</td>
</tr>
</tbody>
</table>
</div>
<p>当需要 <code translate="no" class="notranslate text-nowrap">change</code>【更改】处理程序时，必须通过 <code translate="no" class="notranslate text-nowrap">add-on-change</code> 支持来启用它，否则它就是一个 noop 方法。</p>
<h3 id="using-native-browser-inputs" class="bv-no-focus-ring"><span class="bd-content-title">使用本地浏览器输入<a class="anchorjs-link" href="#using-native-browser-inputs" aria-labelledby="using-native-browser-inputs"></a></span></h3>
<p>范围包含可以直接绑定到本机 <code translate="no" class="notranslate text-nowrap">&lt;input&gt;</code> 或 <code translate="no" class="notranslate text-nowrap">&lt;select&gt;</code> 元素的属性和事件处理程序。</p>
<p>以下示例包括建议的 ARIA 属性和屏幕阅读器支持所需的角色。</p>
<div translate="translate" class="bd-example vue-example vue-example-form-tags-custom-native notranslate">
<div>
<div role="group" class="b-form-tags form-control h-auto mb-2" id="__BVID__938" aria-describedby="__BVID__938__selected_">
<output role="status" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__938__selected-tags_" for="__BVID__938___input__">apple, orange, banana, pear, peach</output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__938__removed-tags_"></div>
<div aria-controls="my-custom-tags-list" role="group" class="input-group">
<input placeholder="New tag - Press enter to add" class="form-control" id="__BVID__938___input__">
<div class="input-group-append">
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
<ul id="my-custom-tags-list" aria-live="polite" aria-atomic="false" aria-relevant="additions removals" class="list-unstyled d-inline-flex flex-wrap mb-0">
<li id="my-custom-tags-tag_apple_" class="card mt-1 mr-1">
<div class="card-body py-1 pr-2 text-nowrap"><strong>apple</strong>
<button aria-controls="my-custom-tags-tag_apple_" type="button" class="btn btn-link btn-sm">remove</button>
</div>
</li>
<li id="my-custom-tags-tag_orange_" class="card mt-1 mr-1">
<div class="card-body py-1 pr-2 text-nowrap"><strong>orange</strong>
<button aria-controls="my-custom-tags-tag_orange_" type="button" class="btn btn-link btn-sm">remove</button>
</div>
</li>
<li id="my-custom-tags-tag_banana_" class="card mt-1 mr-1">
<div class="card-body py-1 pr-2 text-nowrap"><strong>banana</strong>
<button aria-controls="my-custom-tags-tag_banana_" type="button" class="btn btn-link btn-sm">remove</button>
</div>
</li>
<li id="my-custom-tags-tag_pear_" class="card mt-1 mr-1">
<div class="card-body py-1 pr-2 text-nowrap"><strong>pear</strong>
<button aria-controls="my-custom-tags-tag_pear_" type="button" class="btn btn-link btn-sm">remove</button>
</div>
</li>
<li id="my-custom-tags-tag_peach_" class="card mt-1 mr-1">
<div class="card-body py-1 pr-2 text-nowrap"><strong>peach</strong>
<button aria-controls="my-custom-tags-tag_peach_" type="button" class="btn btn-link btn-sm">remove</button>
</div>
</li>
</ul>
</div>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">no-outer-focus</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot</span>=<span class="hljs-string">"{ tags, inputAttrs, inputHandlers, addTag, removeTag }"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-input-group</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"my-custom-tags-list"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
            <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"inputAttrs"</span>
            <span class="hljs-attr">v-on</span>=<span class="hljs-string">"inputHandlers"</span>
            <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"New tag - Press enter to add"</span>
            <span class="hljs-attr">class</span>=<span class="hljs-string">"form-control"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-input-group-append</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"addTag()"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Add<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-input-group-append</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-input-group</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>
          <span class="hljs-attr">id</span>=<span class="hljs-string">"my-custom-tags-list"</span>
          <span class="hljs-attr">class</span>=<span class="hljs-string">"list-unstyled d-inline-flex flex-wrap mb-0"</span>
          <span class="hljs-attr">aria-live</span>=<span class="hljs-string">"polite"</span>
          <span class="hljs-attr">aria-atomic</span>=<span class="hljs-string">"false"</span>
          <span class="hljs-attr">aria-relevant</span>=<span class="hljs-string">"additions removals"</span>
        &gt;</span>
          <span class="hljs-comment">&lt;!-- Always use the tag value as the :key, not the index! --&gt;</span>
          <span class="hljs-comment">&lt;!-- Otherwise screen readers will not read the tag
               additions and removals correctly --&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
            <span class="hljs-attr">v-for</span>=<span class="hljs-string">"tag in tags"</span>
            <span class="hljs-attr">:key</span>=<span class="hljs-string">"tag"</span>
            <span class="hljs-attr">:id</span>=<span class="hljs-string">"`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"</span>
            <span class="hljs-attr">tag</span>=<span class="hljs-string">"li"</span>
            <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-1 mr-1"</span>
            <span class="hljs-attr">body-class</span>=<span class="hljs-string">"py-1 pr-2 text-nowrap"</span>
          &gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ tag }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
              @<span class="hljs-attr">click</span>=<span class="hljs-string">"removeTag(tag)"</span>
              <span class="hljs-attr">variant</span>=<span class="hljs-string">"link"</span>
              <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
              <span class="hljs-attr">:aria-controls</span>=<span class="hljs-string">"`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"</span>
            &gt;</span>remove<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: [<span class="hljs-string">'apple'</span>, <span class="hljs-string">'orange'</span>, <span class="hljs-string">'banana'</span>, <span class="hljs-string">'pear'</span>, <span class="hljs-string">'peach'</span>]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h3 id="using-custom-form-components" class="bv-no-focus-ring"><span class="bd-content-title">使用自定义表单组件<a class="anchorjs-link" href="#using-custom-form-components" aria-labelledby="using-custom-form-components"></a></span></h3>
<p>范围包含可以直接绑定到大多数自定义输入或选择组件的属性和事件处理程序（事件处理程序接受字符串标记值 <em>或</em> 本机事件对象）。键入任何作为字符发出 <code translate="no" class="notranslate text-nowrap">input</code>【输入】的组件，并且（可选）在输入值更改时（即，在模糊或选择时）发出 <code translate="no" class="notranslate text-nowrap">change</code>【更改】并使用 <code translate="no" class="notranslate text-nowrap">value</code> 属性作为 v-model 的组件都应工作而无需进行修改。</p>
<p>在此示例中，我们使用 <a href="#b-form-tag-helper-component" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-tag&gt;</code> helper component</a>【辅助组件】，但可以使用标准 HTML 或组件随意呈现标签。</p>
<div translate="translate" class="bd-example vue-example vue-example-form-tags-custom-components-input notranslate">
<div>
<div role="group" class="b-form-tags form-control h-auto mb-2" id="__BVID__940" aria-describedby="__BVID__940__selected_">
<output role="status" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__940__selected-tags_" for="__BVID__940___input__">apple, orange, banana</output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__940__removed-tags_"></div>
<div role="group" class="input-group mb-2">
<input type="text" placeholder="New tag - Press enter to add" class="form-control form-control" id="__BVID__940___input__">
<div class="input-group-append">
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
<div class="d-inline-block" style="font-size: 1.5rem;"><span title="apple" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mr-1 badge-secondary" id="__BVID__942" aria-labelledby="__BVID__942__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__942__taglabel_">apple</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__942" aria-describedby="__BVID__942__taglabel_">×</button>
</span><span title="orange" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mr-1 badge-secondary" id="__BVID__943" aria-labelledby="__BVID__943__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__943__taglabel_">orange</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__943" aria-describedby="__BVID__943__taglabel_">×</button>
</span><span title="banana" class="badge b-form-tag d-inline-flex align-items-baseline mw-100 mr-1 badge-secondary" id="__BVID__944" aria-labelledby="__BVID__944__taglabel_"><span class="b-form-tag-content flex-grow-1 text-truncate" id="__BVID__944__taglabel_">banana</span>
<button aria-keyshortcuts="Delete" type="button" aria-label="Remove tag" class="close b-form-tag-remove ml-1" aria-controls="__BVID__944" aria-describedby="__BVID__944__taglabel_">×</button>
</span></div>
</div>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">no-outer-focus</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot</span>=<span class="hljs-string">"{ tags, inputAttrs, inputHandlers, tagVariant, addTag, removeTag }"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-input-group</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>
            <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"inputAttrs"</span>
            <span class="hljs-attr">v-on</span>=<span class="hljs-string">"inputHandlers"</span>
            <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"New tag - Press enter to add"</span>
            <span class="hljs-attr">class</span>=<span class="hljs-string">"form-control"</span>
          &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-input-group-append</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"addTag()"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Add<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-input-group-append</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-input-group</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-block"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"font-size: 1.5rem;"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tag</span>
            <span class="hljs-attr">v-for</span>=<span class="hljs-string">"tag in tags"</span>
            @<span class="hljs-attr">remove</span>=<span class="hljs-string">"removeTag(tag)"</span>
            <span class="hljs-attr">:key</span>=<span class="hljs-string">"tag"</span>
            <span class="hljs-attr">:title</span>=<span class="hljs-string">"tag"</span>
            <span class="hljs-attr">:variant</span>=<span class="hljs-string">"tagVariant"</span>
            <span class="hljs-attr">class</span>=<span class="hljs-string">"mr-1"</span>
          &gt;</span>{{ tag }}<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tag</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: [<span class="hljs-string">'apple'</span>, <span class="hljs-string">'orange'</span>, <span class="hljs-string">'banana'</span>]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<p>以下是使用自定义选择组件从一组预定义标签中进行选择的示例：</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-tags-components-select notranslate">
<div>
<fieldset class="form-group" id="__BVID__946">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__946__BV_label_">Tagged input using select</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" class="b-form-tags form-control h-auto mb-2 form-control-lg" id="__BVID__947" aria-describedby="__BVID__947__selected_">
<output role="status" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__947__selected-tags_" for="__BVID__947___input__"></output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__947__removed-tags_"></div>

<select class="custom-select" id="__BVID__947___input__">
<option disabled="disabled" value="">Choose a tag...</option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Banana">Banana</option>
<option value="Lime">Lime</option>
<option value="Peach">Peach</option>
<option value="Chocolate">Chocolate</option>
<option value="Strawberry">Strawberry</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Tagged input using select"</span>&gt;</span>
      <span class="hljs-comment">&lt;!-- prop `add-on-change` is needed to enable adding tags vie the `change` event --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">add-on-change</span> <span class="hljs-attr">no-outer-focus</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot</span>=<span class="hljs-string">"{ tags, inputAttrs, inputHandlers, disabled, removeTag }"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"tags.length &gt; 0"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-inline d-inline-block mb-2"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"tag in tags"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"tag"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-inline-item"</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tag</span>
                @<span class="hljs-attr">remove</span>=<span class="hljs-string">"removeTag(tag)"</span>
                <span class="hljs-attr">:title</span>=<span class="hljs-string">"tag"</span>
                <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled"</span>
                <span class="hljs-attr">variant</span>=<span class="hljs-string">"info"</span>
              &gt;</span>{{ tag }}<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tag</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
            <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"inputAttrs"</span>
            <span class="hljs-attr">v-on</span>=<span class="hljs-string">"inputHandlers"</span>
            <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled || availableOptions.length === 0"</span>
            <span class="hljs-attr">:options</span>=<span class="hljs-string">"availableOptions"</span>
          &gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:first</span>&gt;</span>
              <span class="hljs-comment">&lt;!-- This is required to prevent bugs with Safari --&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>&gt;</span>Choose a tag...<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">options</span>: [<span class="hljs-string">'Apple'</span>, <span class="hljs-string">'Orange'</span>, <span class="hljs-string">'Banana'</span>, <span class="hljs-string">'Lime'</span>, <span class="hljs-string">'Peach'</span>, <span class="hljs-string">'Chocolate'</span>, <span class="hljs-string">'Strawberry'</span>],
        <span class="hljs-attr">value</span>: []
      }
    },
    <span class="hljs-attr">computed</span>: {
      availableOptions() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.options.filter(<span class="hljs-function"><span class="hljs-params">opt</span> =&gt;</span> <span class="hljs-keyword">this</span>.value.indexOf(opt) === <span class="hljs-number">-1</span>)
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<p>如果自定义输入使用的是模仿 <code translate="no" class="notranslate text-nowrap">input</code> 和 <code translate="no" class="notranslate text-nowrap">change</code> 的自定义事件名称，并且/或者需要使用 <code translate="no" class="notranslate text-nowrap">.native</code> 修饰符进行击键，则可以执行以下类似操作来绑定事件处理程序：</p>
<pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:default</span>=<span class="hljs-string">"{ inputAttrs, inputHandlers, removeTag, tags }"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">custom-input</span>
    <span class="hljs-attr">:id</span>=<span class="hljs-string">"inputAttrs.id"</span>
    <span class="hljs-attr">:vistom-value-prop</span>=<span class="hljs-string">"inputAttrs.value"</span>
    @<span class="hljs-attr">custom-input-event</span>=<span class="hljs-string">"inputHandlers.input($event)"</span>
    @<span class="hljs-attr">custom-change-event</span>=<span class="hljs-string">"inputHandlers.change($event)"</span>
    @<span class="hljs-attr">keydown.native</span>=<span class="hljs-string">"inputHandlers.keydown($event)"</span>
  &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">custom-input</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"tag in tags"</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- Your custom tag list here --&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre>
<p><code translate="no" class="notranslate text-nowrap">inputHandlers.input</code> 处理程序 <strong>必须</strong> 绑定到一个事件，该事件将 <em>随着用户</em> 输入的每个字符而更新，以使键入时标签验证生效。</p>
<h3 id="advanced-custom-rendering-usage" class="bv-no-focus-ring"><span class="bd-content-title">高级自定义渲染用法<a class="anchorjs-link" href="#advanced-custom-rendering-usage" aria-labelledby="advanced-custom-rendering-usage"></a></span></h3>
<p>在 <code translate="no" class="notranslate text-nowrap">inputHandlers</code> 无法与您的自定义输入一起使用的情况下，或者如果您需要更好地控制标记的创建，则可以利用通过默认插槽的作用域提供的其他属性。</p>
<div translate="translate" class="bd-example vue-example vue-example-form-tags-custom-components-advanced notranslate">
<div>
<div class="custom-control custom-switch b-custom-control-lg">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__950">
<label class="custom-control-label" for="__BVID__950">Disable</label>
</div>
<div role="group" class="b-form-tags form-control h-auto mb-2 mt-2" id="__BVID__951" aria-describedby="__BVID__951__selected_">
<output role="status" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__951__selected-tags_" for="__BVID__951___input__"></output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__951__removed-tags_"></div>
<div role="group" class="input-group">
<input type="text" placeholder="Enter a new tag value and click Add" class="form-control" id="__BVID__951___input__">
<div class="input-group-append">
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
<div class="invalid-feedback"> Duplicate tag value cannot be added again! </div>
<small class="form-text text-muted"> There are no tags specified. Add a new tag above. </small></div>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">switch</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"disabled"</span>&gt;</span>Disable<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
      @<span class="hljs-attr">input</span>=<span class="hljs-string">"resetInputValue()"</span>
      <span class="hljs-attr">tag-variant</span>=<span class="hljs-string">"success"</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2 mt-2"</span>
      <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled"</span>
      <span class="hljs-attr">no-outer-focus</span>
      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter a new tag value and click Add"</span>
      <span class="hljs-attr">:state</span>=<span class="hljs-string">"state"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot</span>=<span class="hljs-string">"{tags, inputId, placeholder, disabled, addTag, removeTag }"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-input-group</span>&gt;</span>
          <span class="hljs-comment">&lt;!-- Always bind the id to the input so that it can be focused when needed --&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>
            <span class="hljs-attr">v-model</span>=<span class="hljs-string">"newTag"</span>
            <span class="hljs-attr">:id</span>=<span class="hljs-string">"inputId"</span>
            <span class="hljs-attr">:placeholder</span>=<span class="hljs-string">"placeholder"</span>
            <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled"</span>
            <span class="hljs-attr">:formatter</span>=<span class="hljs-string">"formatter"</span>
          &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-input-group-append</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"addTag(newTag)"</span> <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Add<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-input-group-append</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-input-group</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-invalid-feedback</span> <span class="hljs-attr">:state</span>=<span class="hljs-string">"state"</span>&gt;</span>
          Duplicate tag value cannot be added again!
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-invalid-feedback</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"tags.length &gt; 0"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"tag in tags"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"tag"</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"`Tag: ${tag}`"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">span</span>  <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex align-items-center"</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr-2"</span>&gt;</span>{{ tag }}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
                <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled"</span>
                <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
                <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-danger"</span>
                @<span class="hljs-attr">click</span>=<span class="hljs-string">"removeTag(tag)"</span>
              &gt;</span>
                remove tag
              <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-text</span> <span class="hljs-attr">v-else</span>&gt;</span>
          There are no tags specified. Add a new tag above.
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">newTag</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">value</span>: []
      }
    },
    <span class="hljs-attr">computed</span>: {
      state() {
        <span class="hljs-comment">// Return false (invalid) if new tag is a duplicate</span>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.value.indexOf(<span class="hljs-keyword">this</span>.newTag.trim()) &gt; <span class="hljs-number">-1</span> ? <span class="hljs-literal">false</span> : <span class="hljs-literal">null</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      resetInputValue() {
        <span class="hljs-keyword">this</span>.newTag = <span class="hljs-string">''</span>
      },
      formatter(value) {
        <span class="hljs-keyword">return</span> value.toUpperCase()
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<p>以下是使用 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code> 组件从一组预定义标签中进行选择或搜索的示例：</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-tags-dropdown-example notranslate">
<div>
<fieldset class="form-group" id="__BVID__954">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__954__BV_label_">Tagged input using dropdown</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" class="b-form-tags form-control h-auto mb-2" id="__BVID__955" aria-describedby="__BVID__955__selected_">
<output role="status" aria-live="off" aria-atomic="true" aria-relevant="additions text" class="sr-only" id="__BVID__955__selected-tags_" for="__BVID__955___input__"></output>
<div role="status" aria-live="off" aria-atomic="true" class="sr-only" id="__BVID__955__removed-tags_"></div>

<div class="dropdown b-dropdown" id="__BVID__956">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-outline-secondary btn-sm btn-block" id="__BVID__956__BV_toggle_">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-tag-fill b-icon bi">
<g>
<path fill-rule="evenodd" d="M4 3a1 1 0 00-1 1v4.586a1 1 0 00.293.707l7 7a1 1 0 001.414 0l4.586-4.586a1 1 0 000-1.414l-7-7A1 1 0 008.586 3H4zm4 3.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" clip-rule="evenodd"></path>
</g>
</svg>
Choose tags </button>
<ul role="menu" tabindex="-1" class="dropdown-menu w-100" aria-labelledby="__BVID__956__BV_toggle_">
<li role="presentation">
<form tabindex="-1" class="b-dropdown-form">
<div role="group" class="form-row form-group mb-0" id="__BVID__957">
<label for="tag-search-input" class="col-md-auto col-form-label col-form-label-sm" id="__BVID__957__BV_label_">Search tags</label>
<div class="bv-no-focus-ring col">
<input id="tag-search-input" type="search" autocomplete="off" class="form-control form-control-sm">
</div>
</div>
</form>
</li>
<li role="presentation">
<hr role="separator" aria-orientation="horizontal" class="dropdown-divider">
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item"> Apple </button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item"> Orange </button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item"> Banana </button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item"> Lime </button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item"> Peach </button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item"> Chocolate </button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item"> Strawberry </button>
</li>

</ul>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Tagged input using dropdown"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">no-outer-focus</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot</span>=<span class="hljs-string">"{ tags, disabled, addTag, removeTag }"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"tags.length &gt; 0"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-inline d-inline-block mb-2"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"tag in tags"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"tag"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-inline-item"</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tag</span>
                @<span class="hljs-attr">remove</span>=<span class="hljs-string">"removeTag(tag)"</span>
                <span class="hljs-attr">:title</span>=<span class="hljs-string">"tag"</span>
                <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled"</span>
                <span class="hljs-attr">variant</span>=<span class="hljs-string">"info"</span>
              &gt;</span>{{ tag }}<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tag</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>

          <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-secondary"</span> <span class="hljs-attr">block</span> <span class="hljs-attr">menu-class</span>=<span class="hljs-string">"w-100"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:button-content</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">b-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"tag-fill"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-icon</span>&gt;</span> Choose tags
            <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-form</span> @<span class="hljs-attr">submit.stop.prevent</span>=<span class="hljs-string">"() =&gt; {}"</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
                <span class="hljs-attr">label-for</span>=<span class="hljs-string">"tag-search-input"</span>
                <span class="hljs-attr">label</span>=<span class="hljs-string">"Search tags"</span>
                <span class="hljs-attr">label-cols-md</span>=<span class="hljs-string">"auto"</span>
                <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>
                <span class="hljs-attr">label-size</span>=<span class="hljs-string">"sm"</span>
                <span class="hljs-attr">:description</span>=<span class="hljs-string">"searchDesc"</span>
                <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled"</span>
              &gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>
                  <span class="hljs-attr">v-model</span>=<span class="hljs-string">"search"</span>
                  <span class="hljs-attr">id</span>=<span class="hljs-string">"tag-search-input"</span>
                  <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span>
                  <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
                  <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"off"</span>
                 &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
              <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-form</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-divider</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-divider</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>
              <span class="hljs-attr">v-for</span>=<span class="hljs-string">"option in availableOptions"</span>
              <span class="hljs-attr">:key</span>=<span class="hljs-string">"option"</span>
              @<span class="hljs-attr">click</span>=<span class="hljs-string">"onOptionClick({ option, addTag })"</span>
            &gt;</span>
              {{ option }}
            <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-text</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"availableOptions.length === 0"</span>&gt;</span>
              There are no tags available to select
            <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-text</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">options</span>: [<span class="hljs-string">'Apple'</span>, <span class="hljs-string">'Orange'</span>, <span class="hljs-string">'Banana'</span>, <span class="hljs-string">'Lime'</span>, <span class="hljs-string">'Peach'</span>, <span class="hljs-string">'Chocolate'</span>, <span class="hljs-string">'Strawberry'</span>],
        <span class="hljs-attr">search</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">value</span>: []
      }
    },
    <span class="hljs-attr">computed</span>: {
      criteria() {
        <span class="hljs-comment">// Compute the search criteria</span>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.search.trim().toLowerCase()
      },
      availableOptions() {
        <span class="hljs-keyword">const</span> criteria = <span class="hljs-keyword">this</span>.criteria
        <span class="hljs-comment">// Filter out already selected options</span>
        <span class="hljs-keyword">const</span> options = <span class="hljs-keyword">this</span>.options.filter(<span class="hljs-function"><span class="hljs-params">opt</span> =&gt;</span> <span class="hljs-keyword">this</span>.value.indexOf(opt) === <span class="hljs-number">-1</span>)
        <span class="hljs-keyword">if</span> (criteria) {
          <span class="hljs-comment">// Show only options that match criteria</span>
          <span class="hljs-keyword">return</span> options.filter(<span class="hljs-function"><span class="hljs-params">opt</span> =&gt;</span> opt.toLowerCase().indexOf(criteria) &gt; <span class="hljs-number">-1</span>);
        }
        <span class="hljs-comment">// Show all options available</span>
        <span class="hljs-keyword">return</span> options
      },
      searchDesc() {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.criteria &amp;&amp; <span class="hljs-keyword">this</span>.availableOptions.length === <span class="hljs-number">0</span>) {
          <span class="hljs-keyword">return</span> <span class="hljs-string">'There are no tags matching your search criteria'</span>
        }
        <span class="hljs-keyword">return</span> <span class="hljs-string">''</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      onOptionClick({ option, addTag }) {
        addTag(option)
        <span class="hljs-keyword">this</span>.search = <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h3 id="creating-wrapper-components" class="bv-no-focus-ring"><span class="bd-content-title">创建包装器组件<a class="anchorjs-link" href="#creating-wrapper-components" aria-labelledby="creating-wrapper-components"></a></span></h3>
<p>您可以使用首选的呈现样式轻松地创建自定义包装器组件，如下所示：</p>
<pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-tags</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"value"</span> @<span class="hljs-attr">input</span>=<span class="hljs-string">"$emit('input', $event)"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot</span>=<span class="hljs-string">"{ tags, addTag, removeTag, inputAttrs, inputHandlers }"</span>&gt;</span>
     <span class="hljs-comment">&lt;!-- Place your custom rendering here --&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-tags</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span>
  import { BFormTags } from 'bootstrap-vue'

  export default {
    name: 'MyCustomTags",
    components: { BFormTags },
    model: {
      prop: 'value',
      event: 'input'
    },
    props: {
      value: {
        type: Array,
        default: () =&gt; []
      }
    }
  }
<span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h2 id="b-form-tag-helper-component" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-form-tag&gt;</code> 辅助组件<a class="anchorjs-link" href="#b-form-tag-helper-component" aria-labelledby="b-form-tag-helper-component"></a></span></h2>
<p>BootstrapVue 提供了辅助组件 <code translate="no" class="notranslate text-nowrap">&lt;b-form-tag&gt;</code> ，可与 <code translate="no" class="notranslate text-nowrap">&lt;b-form-tags&gt;</code> 的默认作用域插槽一起使用。该组件基于 <a href="../../../bootstrap-vue/docs/components/badge" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-badge&gt;</code></a> 和 <a href="../../../bootstrap-vue/docs/components/button/#comp-ref-b-button-close" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-button-close&gt;</code></a> 。</p>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-tag&gt;</code> 支持与 <code translate="no" class="notranslate text-nowrap">&lt;b-badge&gt;</code> 相同的变量，还支持 <code translate="no" class="notranslate text-nowrap">pill</code>【胶囊】样式。大小调整基于包含元素的字体大小。</p>
<p>单击 <code translate="no" class="notranslate text-nowrap">&lt;b-form-tag&gt;</code> 删除按钮时，将发出 <code translate="no" class="notranslate text-nowrap">remove</code> 事件。</p>
<p>对于其父容器而言太宽的标签将自动用省略号将其文本内容截断。因此，在标记内容中使用默认位置 <code translate="no" class="notranslate text-nowrap">&lt;b-form-tag&gt;</code> 的默认插槽时，始终通过 <code translate="no" class="notranslate text-nowrap">title</code> 属性提供标题始终是一种好习惯。</p>
<p>注意 <code translate="no" class="notranslate text-nowrap">&lt;b-form-tag&gt;</code> 必需的 Bootstrap Vue 自定义 CSS / SCSS ，以实现正确的样式。</p>
<!-- Component reference added automatically from component package.json --> 

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/form-tags#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-tags" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-tags&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-tags#comp-ref-b-form-tags" class="anchorjs-link" aria-labelledby="comp-ref-b-form-tags" target="_self"></a></span></h3>
<span data-v-866a22e8="" class="badge badge-success">v2.2.0+</span> </div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form-tags/form-tags.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-tags-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-tags&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-tags-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-tags&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-tags-v-model"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-tags&gt;</code> v-model </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-tags-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-tags&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-tags-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-tags&gt;</code> 事件 </a></li>

</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-tags-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-tags#comp-ref-b-form-tags-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-form-tags-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-tags&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tags&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>

<h4 data-v-866a22e8="" id="comp-ref-b-form-tags-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-tags#comp-ref-b-form-tags-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-tags-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__793">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="id" class="" id="__BVID__793__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>

<tr role="row" data-pk="input-id" class="" id="__BVID__793__row_input-id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">input-id</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于新标签输入元素的ID。如果未提供，则会自动生成一个唯一的ID</td>
</tr>

<tr role="row" data-pk="placeholder" class="" id="__BVID__793__row_placeholder">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">placeholder</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Add tag...'</code></td>
<td aria-colindex="4" role="cell" class="">在表单控件上设置 “placeholder” 属性值</td>
</tr>

<tr role="row" data-pk="disabled" class="" id="__BVID__793__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>

<tr role="row" data-pk="name" class="" id="__BVID__793__row_name">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">name</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置表单控件上“name”属性的值. When set, creates a hidden input for each tag</td>
</tr>

<tr role="row" data-pk="form" class="" id="__BVID__793__row_form">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">form</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表单控件所属的表单的ID。在控件上设置“form”属性</td>
</tr>

<tr role="row" data-pk="autofocus" class="" id="__BVID__793__row_autofocus">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">autofocus</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，尝试在安装控件时自动将其调焦，或者在 keep-alive【保持活动】状态时将其重新激活。未在控件上设置“autofocus”属性</td>
</tr>

<tr role="row" data-pk="state" class="" id="__BVID__793__row_state">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">state</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">控制组件的验证状态外观。“true”表示有效，“false”表示无效”，“null”表示无验证状态</td>
</tr>

<tr role="row" data-pk="size" class="" id="__BVID__793__row_size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">size</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置组件外观的大小。'sm'，'md'（默认）或'lg'</td>
</tr>

<tr role="row" data-pk="input-type" class="" id="__BVID__793__row_input-type">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">input-type</code>  <span data-v-866a22e8="" class="badge badge-secondary">v2.3.0+</span>   </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'text'</code></td>
<td aria-colindex="4" role="cell" class="">指定要使用的输入类型：'text', 'email', 'tel', 'url', 或 'number'. 默认为 'text'</td>
</tr>

<tr role="row" data-pk="input-class" class="" id="__BVID__793__row_input-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">input-class</code>     </td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于新标签输入元素的一个或多个类</td>
</tr>

<tr role="row" data-pk="input-attrs" class="" id="__BVID__793__row_input-attrs">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">input-attrs</code>     </td>
<td aria-colindex="2" role="cell" class="">Object</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">{}</code></td>
<td aria-colindex="4" role="cell" class="">应用于新标签输入元素的其他属性</td>
</tr>

<tr role="row" data-pk="add-button-text" class="" id="__BVID__793__row_add-button-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">add-button-text</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Add'</code></td>
<td aria-colindex="4" role="cell" class="">内置“Add”按钮的文字。插槽“add-button-text”优先</td>
</tr>

<tr role="row" data-pk="add-button-variant" class="" id="__BVID__793__row_add-button-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">add-button-variant</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'outline-secondary'</code></td>
<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变体之一应用于“Add”按钮</td>
</tr>

<tr role="row" data-pk="tag-variant" class="" id="__BVID__793__row_tag-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag-variant</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'secondary'</code></td>
<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变量之一应用于标签</td>
</tr>

<tr role="row" data-pk="tag-class" class="" id="__BVID__793__row_tag-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag-class</code>     </td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于标签的一个或多个类</td>
</tr>

<tr role="row" data-pk="tag-pills" class="" id="__BVID__793__row_tag-pills">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag-pills</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">使内置标签具有胶囊外观</td>
</tr>

<tr role="row" data-pk="tag-remove-label" class="" id="__BVID__793__row_tag-remove-label">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag-remove-label</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Remove tag'</code></td>
<td aria-colindex="4" role="cell" class="">标签中“删除”按钮上“aria-label”属性的值</td>
</tr>

<tr role="row" data-pk="tag-removed-label" class="" id="__BVID__793__row_tag-removed-label">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag-removed-label</code>  <span data-v-866a22e8="" class="badge badge-secondary">v2.5.0+</span>   </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Tag removed'</code></td>
<td aria-colindex="4" role="cell" class="">aria-live 区域的标签，向屏幕阅读器用户宣布已删除标签</td>
</tr>

<tr role="row" data-pk="tag-validator" class="" id="__BVID__793__row_tag-validator">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag-validator</code>     </td>
<td aria-colindex="2" role="cell" class="">Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">可选的标签验证器方法。 传递了要添加标签的单个参数。 如果标签通过验证，则应返回“true”；如果无法添加标签，则应返回“false”</td>
</tr>

<tr role="row" data-pk="duplicate-tag-text" class="" id="__BVID__793__row_duplicate-tag-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">duplicate-tag-text</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Duplicate tag(s)'</code></td>
<td aria-colindex="4" role="cell" class="">检测到重复标签时的消息。设置为空字符串以禁用该消息</td>
</tr>

<tr role="row" data-pk="invalid-tag-text" class="" id="__BVID__793__row_invalid-tag-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">invalid-tag-text</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Invalid tag(s)'</code></td>
<td aria-colindex="4" role="cell" class="">检测到无效标签时的错误消息。设置为空字符串以禁用该消息</td>
</tr>

<tr role="row" data-pk="separator" class="" id="__BVID__793__row_separator">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">separator</code>     </td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将触发标签创建的分隔符</td>
</tr>

<tr role="row" data-pk="remove-on-delete" class="" id="__BVID__793__row_remove-on-delete">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">remove-on-delete</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，当用户按下 Delete 或 Backspace 并且输入为空时，启用删除标签中的最后一个标签</td>
</tr>

<tr role="row" data-pk="add-on-change" class="" id="__BVID__793__row_add-on-change">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">add-on-change</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，启用在输入的“change”事件上添加标签</td>
</tr>

<tr role="row" data-pk="no-add-on-enter" class="" id="__BVID__793__row_no-add-on-enter">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-add-on-enter</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，禁用在输入的'keydown.enter'事件上添加标签</td>
</tr>

<tr role="row" data-pk="no-outer-focus" class="" id="__BVID__793__row_no-outer-focus">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-outer-focus</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置时，禁用组件根元素的焦点样式</td>
</tr>

<tr role="row" data-pk="value" class="" id="__BVID__793__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value</code>   <span data-v-866a22e8="" class="badge badge-primary">v-model</span>  </td>
<td aria-colindex="2" role="cell" class="">Array</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">[]</code></td>
<td aria-colindex="4" role="cell" class="">当前标签数组。这是v-model</td>
</tr>

</tbody>

</table>
</div>

<h4 data-v-866a22e8="" id="comp-ref-b-form-tags-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-tags#comp-ref-b-form-tags-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-form-tags-v-model" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__831">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
</tr>

</tbody>

</table>
</div>

<h4 data-v-866a22e8="" id="comp-ref-b-form-tags-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-tags#comp-ref-b-form-tags-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-form-tags-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__840">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">范围</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="add-button-text" class="" id="__BVID__840__row_add-button-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">add-button-text</code> </td>
<td aria-colindex="2" role="cell" class="">要放置在内置“Add”按钮中的内容。优先于“add-button-text”属性。提供默认作用域的插槽时不使用</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>

<tr role="row" data-pk="default" class="" id="__BVID__840__row_default">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">default</code> </td>
<td aria-colindex="2" role="cell" class="">插槽以覆盖标签组件的默认呈现</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>

</tbody>

</table>
</div>

<h4 data-v-866a22e8="" id="comp-ref-b-form-tags-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-tags#comp-ref-b-form-tags-events" class="anchorjs-link" aria-labelledby="comp-ref-b-form-tags-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__851">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="input" class="" id="__BVID__851__row_input">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code> </td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code> - <span data-v-866a22e8="">当前标签数组。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">标签更改时发出。更新v-model</td>
</tr>
<tr role="row" data-pk="tag-state" class="" id="__BVID__851__row_tag-state">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">tag-state</code> </td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">validTags</code> - <span data-v-866a22e8="">已添加（或将要添加）新标签的数组。 如果未添加标签，则长度为零。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">invalidTags</code> - <span data-v-866a22e8="">由于未通过验证而无法添加的标签数组。如果没有无效标签，则长度为零。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">duplicateTags</code> - <span data-v-866a22e8="">无法添加的标签数组，因为它们将是重复的标签。如果没有重复标签，则长度为零。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">解析用户输入中的标签时发出</td>
</tr>

</tbody>

</table>
</div>
</article>


<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-tag" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-tag&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-tags#comp-ref-b-form-tag" class="anchorjs-link" aria-labelledby="comp-ref-b-form-tag" target="_self"></a></span></h3>
<span data-v-866a22e8="" class="badge badge-success">v2.2.0+</span> </div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form-tags/form-tag.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-tag-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-tag&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-tag-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-tag&gt;</code> 属性 </a></li>
 
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-tag-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-tag&gt;</code> 事件 </a></li>

</ul>

<h4 data-v-866a22e8="" id="comp-ref-b-form-tag-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-tags#comp-ref-b-form-tag-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-form-tag-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-tag&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tag&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>

<h4 data-v-866a22e8="" id="comp-ref-b-form-tag-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-tags#comp-ref-b-form-tag-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-tag-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__868">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="id" class="" id="__BVID__868__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>

<tr role="row" data-pk="variant" class="" id="__BVID__868__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'secondary'</code></td>
<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变量之一应用于组件</td>
</tr>

<tr role="row" data-pk="disabled" class="" id="__BVID__868__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>

<tr role="row" data-pk="title" class="" id="__BVID__868__row_title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在标签的“title”属性中的值。如果未提供默认位置，也将用于标签内容</td>
</tr>

<tr role="row" data-pk="pill" class="" id="__BVID__868__row_pill">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">pill</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">使标签具有胶囊外观</td>
</tr>

<tr role="row" data-pk="remove-label" class="" id="__BVID__868__row_remove-label">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">remove-label</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Remove tag'</code></td>
<td aria-colindex="4" role="cell" class="">标签中“删除”按钮上“aria-label”属性的值</td>
</tr>

<tr role="row" data-pk="tag" class="" id="__BVID__868__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'span'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的 HTML 标签，而不是默认标签</td>
</tr>

</tbody>

</table>
</div>


 

<h4 data-v-866a22e8="" id="comp-ref-b-form-tag-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-tags#comp-ref-b-form-tag-events" class="anchorjs-link" aria-labelledby="comp-ref-b-form-tag-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__885">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="remove" class="" id="__BVID__885__row_remove">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">remove</code> </td>
<td aria-colindex="2" role="cell" class=""></td>
<td aria-colindex="3" role="cell" class="">单击删除按钮时发出</td>
</tr>

</tbody>

</table>
</div>
</article>
</section>

<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/form-tags#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__896">

<thead role="rowgroup" class="thead-default">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-tags&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormTags</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-tag&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormTag</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>

</tbody>

</table>
</div>
<p><strong>示例：</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BFormTags } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-form-tags'</span>, BFormTags)</pre>



<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/form-tags#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__907">

<thead role="rowgroup" class="thead-default">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">FormTagsPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>

</tbody>

</table>
</div>

<p><strong>示例：</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { FormTagsPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(FormTagsPlugin)</pre>













</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
